<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="commonPage" lang="en-GB" xml:lang="en-GB">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Demo - Web&#xA0;Developers&#xAE; Elixon&#xA0;CMS/AJAX</title>

	<!-- Include jQuery -->
<script type="text/javascript" src="http://127.0.0.1:8000/static/js/jquery.min.js "></script>


    <link type="text/css" rel="stylesheet" href="http://127.0.0.1:8000/static/site/theatre/theatre.css"/>
    <script type="text/javascript" src="http://127.0.0.1:8000/static/site/theatre/jquery.theatre.min.js"></script>

	<!-- Some styling for this page 
    <link rel="stylesheet" href="demo.css"/> -->

	<!-- This is how you initialize theatre -->
	<script type="text/javascript">
	  $(window).load(function() { // Run when everything is loaded (especially images)
	     $('#myExample1').theatre({ //Initialize theatre
	        // For comlete list of possible settings visit http://www.webdevelopers.eu/shop/5/doc/index#wdx_Settings
		    'effect': '3d', // css3:stack effect and fall over to 3d effect for older browsers
	        'selector': 'img', // for galleries we want to animage only images without the surrounding links
	        'paging': '#paging', // generate paging using element with class 'paging' as the template 
          'controls': true,
	     });
	  });
	</script>

	<!-- Design for nicer paging -->
	<style type="text/css">
	  .mypaging {
	    text-align: center;
	  }
	  .paging span {
	    text-decoration: none;
	    color: silver;
	    cursor: pointer;
	  }
	  .paging span.active {
	    font-size: 2em;
	    color: black;
	  }

	  .paging2 span {
	    font-size: 2em;
	  }
    #myExample1 {
      margin: 30px auto;
      width: 640px;
      height: 240px;
      overflow: hidden;
    }

    #myExample1 img {
      border: 2px solid white;
      -moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
      -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
      -o-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);  
      box-shadow: 10px 10px 10px rgba(0,0,0,0.3);   
    }
	</style>
  </head>

  <body>
    <h1>Theatre - The Only Carousel You Will Ever Need</h1>

   
    <br/>


	<!-- gallery -->
    <div id="myExample1" >
      <a href="http://127.0.0.1:8000/static/site/theatre/demo/1.jpg" target="_blank">
        <img src="http://127.0.0.1:8000/static/site/theatre/demo/1.jpg" style="height: 236px; width: 320px;"/>
      </a>
      <a href="http://127.0.0.1:8000/static/site/theatre/demo/2.jpg" target="_blank">
        <img src="http://127.0.0.1:8000/static/site/theatre/demo/2.jpg" style="height: 236px; width: 320px;"/>
      </a>
      <a href="http://127.0.0.1:8000/static/site/theatre/demo/3.jpg" target="_blank">
        <img src="http://127.0.0.1:8000/static/site/theatre/demo/3.jpg" style="height: 236px; width: 320px;"/>
      </a>
      <a href="http://127.0.0.1:8000/static/site/theatre/demo/4.jpg" target="_blank">
        <img src="http://127.0.0.1:8000/static/site/theatre/demo/4.jpg" style="height: 236px; width: 320px;"/>
      </a>
      <a href="http://127.0.0.1:8000/static/site/theatre/demo/5.jpg" target="_blank">
        <img src="http://127.0.0.1:8000/static/site/theatre/demo/5.jpg" style="height: 236px; width: 320px;"/>
      </a>
      <a href="http://127.0.0.1:8000/static/site/theatre/demo/6.jpg" target="_blank">
        <img src="http://127.0.0.1:8000/static/site/theatre/demo/6.jpg" style="height: 236px; width: 320px;"/>
      </a>
      <a href="http://127.0.0.1:8000/static/site/theatre/demo/7.jpg" target="_blank">
        <img src="http://127.0.0.1:8000/static/site/theatre/demo/7.jpg" style="height: 236px; width: 320px;"/>
      </a>
      <a href="http://127.0.0.1:8000/static/site/theatre/demo/8.jpg" target="_blank">
        <img src="http://127.0.0.1:8000/static/site/theatre/demo/8.jpg" style="height: 236px; width: 320px;"/>
      </a>
      <a href="http://127.0.0.1:8000/static/site/theatre/demo/9.jpg" target="_blank">
        <img src="http://127.0.0.1:8000/static/site/theatre/demo/9.jpg" style="height: 236px; width: 320px;"/>
      </a>
      <a href="http://127.0.0.1:8000/static/site/theatre/demo/10.jpg" target="_blank">
        <img src="http://127.0.0.1:8000/static/site/theatre/demo/10.jpg" style="height: 236px; width: 320px;"/>
      </a>
    </div>


	<!-- custom controls -->
	<div class="controls">
	  <span onclick="$('#myExample').theatre('prev');">Prev</span>
	  <span onclick="$('#myExample').theatre('play');">Play</span>	
	  <span onclick="$('#myExample').theatre('stop');">Stop</span>	
	  <span onclick="$('#myExample').theatre('next');">Next</span>
	</div>



  </body>
</html>
